<template>
  <div class="layui-collapse">
    <slot></slot>
  </div>
</template>

<script setup name="LayCollapse"></script>
<script setup lang="ts">
import {
  withDefaults,
  defineProps,
  provide,
  ref,
  defineEmits,
  watch,
} from "vue";

const props = withDefaults(
  defineProps<{
    modelValue?: number | string | [];
    accordion?: boolean;
  }>(),
  {
    modelValue: () => [],
    accordion: false,
  }
);

// 监听传入的值
watch(
  () => props.modelValue,
  (val, oldVal) => {
    activeValues.value = ([] as any[]).concat(val);
  }
);
const emit = defineEmits(["update:modelValue", "change"]);

const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));

provide("layCollapse", {
  accordion: props.accordion,
  activeValues,
  emit,
});
</script>
